<template>
  <div class="stock">
    <div class="head">
      <div class="flex flex-align-c">
        <div class="label">商品名称：</div>
        <div class="text">
          <span>{{ quotationData.categoryName }}</span>
          <a-divider type="vertical" />
          <span>{{ productData.brand }} </span>
          <span>{{ productData.spec }} </span>
          <span>{{ productData.material }} </span>
        </div>
      </div>
      <div class="flex flex-align-c">
        <div class="label">仓库简称：</div>
        <div class="text">{{ productData.warehouseShortName }}</div>
      </div>
    </div>
    <div
      class="tableData"
      v-if="stockData.pageData && stockData.pageData.length !== 0"
    >
      <c-table
        :data="stockData.pageData"
        :total="stockData.total"
        :columns="stockColumns"
        :loading="loading"
        :pageSize="10"
        @onReload="reload"
        @pageChange="pageChange"
      >
      </c-table>
      <div class="tips">
        <a-alert
          type="warning"
          show-icon
          message="温馨提示：本实物库存明细数据可能存在延时，请以成交后，实际关联的实物库存为准。"
        />
      </div>
    </div>
    <div class="noData tc danger" v-else>
      暂无此规格商品的实物库存明细，还请联系供应商及时上传实物库存明细。
    </div>
  </div>
</template>

<script>
import { getproviderentityinventorypage } from "@/api/inventory";
export default {
  props: {
    // 商品信息
    productData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 报价信息
    quotationData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      pageNum: 1,
      stockData: [],
      stockColumns: [
        {
          title: "库存单号",
          dataIndex: "entityInventoryCode"
        },
        {
          title: "库位号",
          dataIndex: "positionCode"
        },
        {
          title: "材料号",
          dataIndex: "materialCode"
        },
        {
          title: "实重",
          dataIndex: "weight"
        }
      ]
    };
  },
  methods: {
    reload() {
      this.pageNum = 1;
      this.init();
    },
    pageChange(page) {
      this.pageNum = page;
      this.init();
    },
    init() {
      this.loading = true;
      getproviderentityinventorypage({
        quotationDetailId: this.productData.id,
        pageData: {
          pageNum: this.pageNum,
          pageSize: 10
        }
      })
        .then(res => {
          this.stockData = res;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.stock {
  .head {
    background-color: #fafafa;
    padding: 20px;
    font-size: 15px;
    margin-bottom: 16px;
    .flex:first-child {
      margin-bottom: 10px;
    }
  }
  .tips {
    margin-top: 20px;
  }
  .noData {
    padding: 50px 0;
  }
}
</style>
